<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>还书</title>

    <!--表格-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
        }

        .el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;

        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-container>
        <el-header><div>${user.username}的借书信息</div></el-header>
        <el-main>

            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        height="500"
                        border
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="还书日期"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="书籍名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="overtime"
                            label="是否逾期"
                            align="center">
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            align="center">
                        <template #default="scope">
                            <el-row>
                                <el-button type="primary" @click="sendId(scope.row)" icon="el-icon-s-opportunity">还书</el-button>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

        </el-main>

        <el-footer>图书管理系统</el-footer>
    </el-container>




</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",

        mounted() {
            this.selectAll();

        },

        methods: {

            selectAll() {

                var _this = this;

                axios({
                    method: "get",
                    url: "http://localhost:8080/bookstore/book/revert",
                }).then(function (resp) {
                    _this.tableData = resp.data;
                })
            },

            //---------------点击还书发送id-----------
            sendId(row) {
                console.log(row.id);

                //弹出确认提示框
                this.$confirm('是否确认还书?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    var _this = this;
                    axios({
                        method: "post",
                        url: "http://localhost:8080/bookstore/book/deleteBorrow",
                        data: row.id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //还书成功

                            //重新查询数据
                            _this.selectAll();

                            _this.$message({
                                message: '还书成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消还书'
                    });
                });
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

        },

        data() {
            return {
                //书籍的数据
                borrow: {
                    name: '',
                    username:'',
                    time: '',
                    overtime:'',
                    category:''
                },


                //表格数据
                tableData: [{
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }, {
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }, {
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }, {
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }, {
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }, {
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }, {
                    time: '2022-5-10',
                    name: '西游记',
                    username: '王小虎',
                    overtime: '是'
                }]
            }
        }
    })

</script>
</body>
</html>